<template>
  <div id="code">
    <div class="row">
      <div class="col-md-12">
        <blockquote class="panel-primary small bg-info">
          <p class="text-muted"  v-text="url"></p>
        </blockquote>
      </div>
      <div class="col-md-12">
        <table class="table  table-striped table-bordered">
          <tbody>
            <tr>
              <td width="30%"><img @click="setTime" @load="loadEnd($event)" :src="url" :alt="url"></td>
              <td>baseUrl:</td>
              <td><input type="text" class="form-control" v-model="baseUrl"></td>
              <td>type:</td>
              <td><input type="text" class="form-control" v-model="type"></td>
              <td>id:</td>
              <td><input type="text" class="form-control" v-model="id"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
  import {baseUrl, imgCodeUrl} from '../assets/js/setting.js'
  import bus from '../assets/js/bus.js'
  import mixin from '../assets/js/mixin.js'
  export default{
    data: () => {
      return {
        baseUrl: baseUrl,
        imgCodeUrl: imgCodeUrl,
        type: 'register',
        id: '1',
        time: 0,
        loadingObj: null
      }
    },
    watch: {
      url () {
        this.loadingObj = this.$loading({fullscreen: true, text: '正在加载...'})
      }
    },
    created () {
      bus.$on('changeBaseUrl', this.changeBaseUrl)
      this.loadingObj = this.$loading({fullscreen: true, text: '正在加载...'})
    },
    computed: {
      url () {
        return this.baseUrl + this.imgCodeUrl + '/type/' + this.type + '/id/' + this.id + '/time/' + this.time
      }
    },
    mixins: [mixin],
    methods: {
      setTime () {
        this.time = new Date().getTime()
      },
      loadEnd (ev) {
        this.loadingObj.close()
      }
    }
  }
</script>
<style scoped>
  #code{
    margin-top: 60px;
  }
  img{
    border:1px solid #666;
  }
  input{
    display: inline-block;
  }
  .text-muted{
    font-size: 1.2em;
  }
</style>
